<%--
  Created by IntelliJ IDEA.
  User: veneno
  Date: 2020/11/18
  Time: 9:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="css/default.css">
    <link rel="stylesheet" href="css/bootstrap-table.css">
    <link rel="stylesheet" href="css/bootstrap-table.min.css">
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.min.js"></script>
    <script src="js/bootstrap-table-zh-CN.min.js"></script>
    <script src="js/sweetalert.min.js"></script>
    <script src="js/custom.js"></script>
    <title>显示页面</title>
</head>

<body>

<%--头部信息栏--%>
<jsp:include page="pages/head.jsp"></jsp:include>



<section>
    <div class="mainwrapper">

        <!--左边垂直导航栏开始-->
        <div class="leftpanel">

            <!--垂直头像信息栏开始-->
            <div class="media profile-left">
                <a class="pull-left profile-thumb" href="#updateinfo" data-toggle="modal">
                    <img class="img-circle" src="images/profile1.png" alt="">
                </a>
                <div class="media-body">
                    <h4 class="media-heading">${loginUser.username}</h4>
                    <span class="user-options"><a href="#updateinfo" data-toggle="modal"><i class="glyphicon glyphicon-user"></i></a>
                              <a href="#updatePass" data-toggle="modal"><i class="glyphicon glyphicon-cog"></i></a>
                              <a href="loginOut"><i class="glyphicon glyphicon-log-out"></i></a>
							</span>
                </div>
            </div>
            <!--垂直头像信息栏结束-->



            <ul class="nav nav-pills nav-stacked">
                <li class="parent"><a href="#"><i class="fa fa-home"></i> <span>图书管理</span></a>
                    <ul class="children">
                        <li><a href="main.jsp">图书信息管理</a></li>
                        <li><a href="borrowBooks.jsp">图书借阅</a></li>
                        <li><a href="returnBooks.jsp">图书归还</a></li>
                        <li><a href="searchBorrowBooks.jsp">借阅查询</a></li>
                    </ul>
                </li>
                <li class="parent"><a href="#"><i class="fa fa-database"></i> <span>管理员管理</span></a>
                    <ul class="children">
                        <li><a href="adminMang.jsp">管理员信息管理</a></li>
                    </ul>
                </li>


                <li class="parent active"><a href="#"><i class="fa  fa-columns"></i> <span>读者管理</span></a>
                    <ul class="children">
                        <li class="active"><a href="readerMang.jsp">读者信息管理</a></li>
                    </ul>
                </li>

            </ul>

        </div>
        <!--左边垂直导航栏结束-->


        <!--页面主体部分开始-->
        <div class="mainpanel">
            <div class="contentpanel" style="height: 100%">
                <!--面板开始-->
                <div class="panel panel-default">

                    <!--面板标题开始-->
                    <div class="panel-heading">
                        <div class="panel-btns">
                            <a href="#" class="panel-minimize tooltips" data-toggle="tooltip" title="Minimize Panel"><i class="fa fa-minus"></i></a>
                        </div><!-- panel-btns -->
                        <h4 class="panel-title">管理</h4>
                        <p>查询管理员</p>
                    </div>
                    <!--面板标题结束-->

                    <!--面板主体开始-->
                    <div class="panel-body">
                        <!--图书数据展示-->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="col-md-12">
                                    <table class="table table-hover table-bordered" id="table"></table>
                                </div>
                            </div>
                        </div>
                        <!--图书数据展示结束-->
                    </div>
                    <!--面板主体结束-->


                </div>
                <!--面板结束-->

            </div><!-- contentpanel -->

        </div>
        <!--页面主体部分结束-->

    </div><!-- mainwrapper -->
</section>


<%--模态框开始--%>
<%--个人信息模态框--%>
<form class="form-horizontal" action="" id="model_form1"><!--保证样式水平不混乱-->
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="updateinfo" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="z-index: 1048">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="ModalLabel">个人信息</h4>
                </div>

                <div class="modal-body">

                    <input type="hidden" name="id" value="${loginUser.id}">
                    <input type="hidden" name="password" value="${loginUser.password}">
                    <input type="hidden" name="name" value="${loginUser.name}">




                    <!--正文-->

                    <div class="form-group">
                        <label for="name" class="col-sm-3 control-label">用户名</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="name" name="username" readonly value="${loginUser.username}">
                            <label class="control-label" for="name" style="display: none"></label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="phone" class="col-sm-3 control-label">联系号码</label>
                        <div class="col-sm-7">
                            <input type="text" minlength="11" maxlength="11" class="form-control" onblur="checkPhone();" id="phone" name="phone"  placeholder="请输入您的联系号码" value="${loginUser.phone}">
                            <label class="control-label" for="phone" id="phoneErro" style="display: none"></label>
                        </div>
                    </div>


                    <!--正文-->

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="updateInfo()">修改</button>
                </div>
            </div>
        </div>
    </div>
</form>
<%--个人信息模态框结束--%>

<%--密码模态框--%>
<form class="form-horizontal" id="model_form2"><!--保证样式水平不混乱-->
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="updatePass" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="z-index: 1048">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="ModalLabel1">修改密码</h4>
                </div>

                <div class="modal-body">
                    <input type="hidden" name="id" value="${loginUser.id}">
                    <input type="hidden" name="username" value="${loginUser.username}">
                    <input type="hidden" name="phone" value="${loginUser.phone}">
                    <input type="hidden" name="name" value="${loginUser.name}">


                    <!--正文-->
                    <div class="form-group">
                        <label for="oldPass" class="col-sm-3 control-label">原密码</label>
                        <div class="col-sm-7">
                            <input type="password" class="form-control" id="oldPass" name="password"  placeholder="请输入您的原密码">
                            <label class="control-label" for="oldPass" style="display: none"></label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="newPass" class="col-sm-3 control-label">新密码</label>
                        <div class="col-sm-7">
                            <input type="password" class="form-control" id="newPass" name="newPass"  placeholder="请输入您的新密码">
                            <label class="control-label" for="newPass" style="display: none"></label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="newPass1" class="col-sm-3 control-label">确认密码</label>
                        <div class="col-sm-7">
                            <input type="password" class="form-control" id="newPass1" name="newPass1"  placeholder="请输入您的新密码">
                            <label class="control-label" for="newPass1" style="display: none"></label>
                        </div>
                    </div>
                    <!--正文-->

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="updatePass()">修改</button>
                </div>
            </div>
        </div>
    </div>
</form>
<%--密码模态框结束--%>

<%--修改读者模态框开始--%>
<form class="form-horizontal" action="" id="model_updateReader"><!--保证样式水平不混乱-->
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="updateReaderInfo" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="z-index: 1048">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="ModalLabel">修改读者信息</h4>
                </div>

                <div class="modal-body">
                    <input type="hidden" id="readerId" name="id">
                    <input type="hidden" id="readerPass" name="password">

                    <!--正文-->

                    <div class="form-group">
                        <label for="cardID" class="col-sm-3 control-label">读者卡号</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" readonly id="updateIdCard" name="idCard">
                            <label class="control-label" for="updateIdCard" style="display: none"></label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="cardID" class="col-sm-3 control-label">读者用户名</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="updateUserName" onblur="checkName1()" name="username">
                            <label class="control-label" id="updateNameMsg" for="updateUserName" style="display: none"></label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="phone" class="col-sm-3 control-label">电话</label>
                        <div class="col-sm-7">
                            <input type="text" minlength="11" maxlength="11" class="form-control" onblur="checkPhone1();" id="updatephone" name="phone">
                            <label class="control-label" id="phoneError" for="phone" style="display: none"></label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="phone" class="col-sm-3 control-label">邮箱</label>
                        <div class="col-sm-7">
                            <input type="email" minlength="11" maxlength="11" class="form-control" id="updateEmail" name="email">
                            <label class="control-label" id="emailError" for="updateEmail" style="display: none"></label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="phone" class="col-sm-3 control-label">状态</label>
                        <div class="col-sm-7">
                            <select class="form-control" name="status">
                                <option value="1">账号再用</option>
                                <option value="0">账号关闭</option>
                            </select>
                        </div>
                    </div>
                    <!--正文-->

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="updateReader()">修改</button>
                </div>
            </div>
        </div>
    </div>
</form>
<%--修改读者模态框结束--%>

<%--添加读者模态框开始--%>
<form class="form-horizontal" action="" id="model_addReader"><!--保证样式水平不混乱-->
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="addReaderInfo" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="z-index: 1048">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="ModalLabel">添加读者</h4>
                </div>

                <div class="modal-body">

                    <div class="form-group">
                        <label for="cardID" class="col-sm-3 control-label">读者卡号</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="idCard" onblur="checkIdCard()" name="idCard">
                            <label class="control-label" id="idCardMsg" for="idCard" style="display: none"></label>
                        </div>
                    </div>

                    <!--正文-->
                    <div class="form-group">
                        <label for="cardID" class="col-sm-3 control-label">读者用户名</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="addUsername" onblur="checkName()" name="username">
                            <label class="control-label" id="nameMsg" for="addUsername" style="display: none"></label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="phone" class="col-sm-3 control-label">密码</label>
                        <div class="col-sm-7">
                            <input type="password" minlength="11" maxlength="11" class="form-control" id="password" name="password">
                            <label class="control-label" for="password" style="display: none"></label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="phone" class="col-sm-3 control-label">确认密码</label>
                        <div class="col-sm-7">
                            <input type="password" minlength="11" maxlength="11" class="form-control" id="password1" name="newPassword">
                            <label class="control-label" for="password1" style="display: none"></label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="phone" class="col-sm-3 control-label">电话</label>
                        <div class="col-sm-7">
                            <input type="text" minlength="11" maxlength="11" onblur="checkPhone2()" class="form-control" id="phone1" name="phone">
                            <label class="control-label" id="phoneEr" for="phone" style="display: none"></label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="phone" class="col-sm-3 control-label">邮箱</label>
                        <div class="col-sm-7">
                            <input type="email" minlength="11" maxlength="11"  class="form-control" id="addEmail" name="email">
                            <label class="control-label" id="" for="addEmail" style="display: none"></label>
                        </div>
                    </div>
                    <!--正文-->

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="addReader()">添加</button>
                </div>
            </div>
        </div>
    </div>
</form>
<%--添加读者模态框结束--%>



<script>
    $("#table").bootstrapTable({
        url:"getAllReader",
        method:"get",
        sidePagination: "client",
        pageList: [10, 20, 30, 50],
        cache:false,
        striped:true,
        pagination:true,
        sortable:true,
        sortOrder:"asc",
        search:true,
        showRefresh: true,
        clickToSelect:true,
        showToggle: true,
        columns:[
            { field: 'id', title: 'id',visible:false },
            { field: 'password', title: 'password',visible:false },
            { field: 'SerialNumber', title: '序号',
                formatter: function (value, row, index) {
                    return index+1;
                }
            },
            { field: 'idCard', title: '卡号' },
            { field: 'username', title: '用户名' },
            { field: 'phone', title: '电话' },
            { field: 'email', title: '邮箱' },
            { field: 'status', title: '状态',
              align: 'center',
              valign: 'middle',
              formatter:function (value,row,index){
                var result=""
                  if (value==="1"){
                      result+='<span class="label label-success">账号再用</span>'
                  }else {
                      result+='<span class="label label-danger">账号关闭</span>'
                  }
                  return result;
              }
            },
            { field: 'operate',
                title: '操作',
                align: 'center',
                valign: 'middle',
                width: 200,
                events: {
                    'click #edit': function (e, value, row, index) {
                        $('#readerId').val(row.id);
                        $('#readerPass').val(row.password);
                        $('#updateIdCard').val(row.idCard);
                        $('#updateUserName').val(row.username);
                        $('#updatephone').val(row.phone);
                        $('#updateEmail').val(row.email);
                        if(row.status==='1'){
                            $("select option:first").prop("selected", 'selected');
                        } else {
                            $("select option:last").prop("selected", 'selected');
                        }
                    },
                    'click #delete': function (e, value, row, index) {
                        deleteInfo(row.id);
                    },
                    'click #add': function (e, value, row, index) {
                    }
                },
                formatter: function (value, row, index) {
                    var result = "";
                    result += '<button id="edit" class="btn btn-info" data-toggle="modal" data-target="#updateReaderInfo">编辑</button>';
                    result += '<button id="add" class="btn btn-success" data-toggle="modal" data-target="#addReaderInfo" style="margin-left:10px;">添加</button>';
                    result += '<button id="delete" class="btn btn-danger" style="margin-left:10px;">删除</button>';
                    return result;
                }
            }
        ]
    })

    function deleteInfo(id) {
        $.ajax({
            type: 'post',
            url: 'deleteReader',
            dataType: 'json',
            data: {
                id: id
            },
            success: function (data) {
                if (data.msg == 'ok') {
                    $('#table').bootstrapTable('refresh');
                    swal("删除成功！",{icon: "success",timer:1500})
                }
                else {
                    swal("删除失败,该人还有书为还完！",{icon: "error",timer:1500})
                }
            }
        })
    }


    function checkName(){
        var username=$("#addUsername").val()
        var nameMsg={
            color:'red',
            display:'block',
            textAlign:'left',
        }
        $.ajax({
            type: 'post',
            url: 'findUsername',
            dataType: 'json',
            data: {
                username:username
            },
            success: function (data) {
                if (data.msg == 'true') {
                    $("#nameMsg").text("该用户名已存在！")
                    $("#nameMsg").css(nameMsg)
                    $("#addUsername")[0].focus()
                }
                else {
                    $("#nameMsg").text("")
                }
            }
        })
    }

    function checkName1(){
        var username=$("#updateUserName").val()
        var nameMsg={
            color:'red',
            display:'block',
            textAlign:'left',
        }
        $.ajax({
            type: 'post',
            url: 'findUsername',
            dataType: 'json',
            data: {
                username:username
            },
            success: function (data) {
                if (data.msg == 'true') {
                    $("#updateNameMsg").text("该用户名已存在！")
                    $("#updateNameMsg").css(nameMsg)
                    $("#updateUserName")[0].focus()
                }
                else {
                    $("#updateNameMsg").text("")
                }
            }
        })
    }

    function checkIdCard(){
        var idCard=$("#idCard").val()
        var idCardMsg={
            color:'red',
            display:'block',
            textAlign:'left',
        }
        $.ajax({
            type: 'post',
            url: 'findIdCard',
            dataType: 'json',
            data: {
                idCard:idCard
            },
            success: function (data) {
                if (data.msg == 'true') {
                    $("#idCardMsg").text("该卡号已存在！")
                    $("#idCardMsg").css(idCardMsg)
                    $("#idCard")[0].focus()
                }
                else {
                    $("#idCardMsg").text("")
                }
            }
        })
    }
    function addReader(){
        checkName();
        checkIdCard();
        var firstPass=$("#password").val()
        var secondPass=$("#password1").val()
        var idCard=$("#idCard").val()
        var username=$("#addUsername").val()
        var email=$("#email").val()
        if ($("#idCardMsg").text()!==""|| $("#phoneEr").text()!==""|| $("#nameMsg").text()!==""){
            swal("请修改错误信息！",{icon: "error",timer:1500})
            return ;
        }
        if(firstPass===""||secondPass===""||username===""||idCard===""||email===""){
            swal("输入信息不为空！",{icon:"error",timer:1800})
            return false;
        } else if (firstPass!==secondPass) {
            swal("两次密码不匹配！", {icon: "error", timer: 1800})
            return false;
        }
        $.ajax({
            type: 'post',
            url: 'addReader',
            dataType: 'json',
            data: $("#model_addReader").serialize(),
            success: function (data) {
                if (data.msg == 'ok') {
                    $('#table').bootstrapTable('refresh');
                    swal("添加成功！",{icon: "success",timer:1500})
                    $("#addReaderInfo").modal('hide')
                    $('#model_addReader')[0].reset(); //重置表单
                }
                else {
                    swal("添加失败！",{icon: "error",timer:1500})
                }
            }
        })
    }

    function updateReader(){
        checkName1();
        var username=$("#updateUserName").val()
        var phone=$("#updatephone").val()
        var email=$("#updateEmail").val()
        if (username===""||phone===""||email===""){
            swal("修改信息不为空哦！",{icon: "error",timer:1500})
            return ;
        }
        if ($("#phoneError").text()!==""||$("#updateNameMsg").text()!==""){
            swal("请修改错误信息！",{icon: "error",timer:1500})
            return ;
        }
        $.ajax({
            type: 'post',
            url: 'updateReader',
            dataType: 'json',
            data: $("#model_updateReader").serialize(),
            success: function (data) {
                if (data.msg == 'ok') {
                    $('#table').bootstrapTable('refresh');
                    swal("修改成功！",{icon: "success",timer:1500})
                    $("#updateReaderInfo").modal('hide')
                    $('#model_updateReader')[0].reset(); //重置表单
                }
                else {
                    swal("修改失败！",{icon: "error",timer:1500})
                }
            }
        })
    }
</script>

<script>

    <%--模态框方法--%>
    /*修改用户信息的事件*/
    function updateInfo(){
        if ($("#phoneErro").text()!==""){
            swal("号码格式不对哦！",{icon: "error",timer:1500})
            return ;
        }
        $.ajax({
            url:"updateAdminInfo",
            type: "post",
            dataType: "json",
            data:$("#model_form1").serialize(),
            success:function (result){
                if (result.msg==="ok"){
                    $("#updateinfo").modal('hide')
                    swal("修改成功！",{icon: "success",timer:1500})
                }
            },
            error:function (){
                swal("修改失败！",{icon: "error",timer:1500})
            }
        })
    }
    //修改密码
    function updatePass(){
        var oldPass=$("#oldPass").val()
        var newPass=$("#newPass").val()
        var newPass1=$("#newPass1").val()
        if(oldPass===""||newPass===""||newPass1===""){
            swal("输入密码不为空！",{icon:"error",timer:1800})
            return false;
        } else if (newPass!==newPass1){
            swal("两次密码不匹配！",{icon:"error",timer:1800})
            return false;
        }else {
            $.ajax({
                url:"updateAdminPass",
                type: "post",
                dataType: "json",
                data:$("#model_form2").serialize(),
                success:function (result){
                    if (result.msg==="ok"){
                        $("#oldPass").val("")
                        $("#newPass").val("")
                        $("#newPass1").val("")
                        $("#updatePass").modal('hide')
                        swal("修改成功！",{icon: "success",timer:1500})
                    }
                    if (result.msg==="PassError"){
                        $("#oldPass").val("")
                        $("#newPass").val("")
                        $("#newPass1").val("")
                        swal("原密码错误，修改失败！",{icon: "error",timer:1500})
                    }
                },
                error:function (){
                    $("#oldPass").val("")
                    $("#newPass").val("")
                    $("#newPass1").val("")
                    swal("修改失败！",{icon: "error",timer:1500})
                }
            })
            return true;
        }

    }

    //检验数据格式
    function checkPhone() {
        var phoneMsg={
            color:'red',
            display:'block',
            textAlign:'left',
        }
        var phoneReg=/^[1][3,4,5,7,8][0-9]{9}$/
        var phone=$("#phone").val()
        if(!phoneReg.test(phone)){
            $("#phoneErro").text("手机号码格式有误！")
            $("#phoneErro").css(phoneMsg)
            $("#phone")[0].focus()
        }else {
            $("#phoneErro").text("")
        }
    }
    function checkPhone1() {
        var phoneMsg={
            color:'red',
            display:'block',
            textAlign:'left',
        }
        var phoneReg=/^[1][3,4,5,7,8][0-9]{9}$/
        var phone=$("#updatephone").val()
        if(!phoneReg.test(phone)){
            $("#phoneError").text("手机号码格式有误！")
            $("#phoneError").css(phoneMsg)
            $("#updatephone")[0].focus()
        }else {
            $("#phoneError").text("")
        }
    }
    function checkPhone2() {
        var phoneMsg={
            color:'red',
            display:'block',
            textAlign:'left',
        }
        var phoneReg=/^[1][3,4,5,7,8][0-9]{9}$/
        var phone=$("#phone1").val()
        if(!phoneReg.test(phone)){
            $("#phoneEr").text("手机号码格式有误！")
            $("#phoneEr").css(phoneMsg)
            $("#phone1")[0].focus()
        }else {
            $("#phoneEr").text("")
        }
    }
</script>





</body>
</html>
